<template>
    <div class="page-container">
        <div class="button-group">
            <el-button type="primary" @click="icopen.iscode = true">新增</el-button>
            <el-button type="primary">导出</el-button>
            <el-button disabled>删除</el-button>
        </div>
    </div>
    <el-table :data="tableData" style="width: 100%; margin-top: 10px;" border>
        <el-table-column prop="workstationCode" label="编码" width="120" />
        <el-table-column prop="workstationName" label="名称" width="120" />
        <el-table-column prop="processOperationName" label="工序" width="120" />
        <el-table-column prop="lineName" label="产线" width="120" />
        <el-table-column prop="description" label="描述" width="140" />
        <el-table-column prop="createId" label="创建人" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="120">
            <template v-slot="scope">
                {{ scope.row.createTime.substring(0, 19).replace("T", " ") }}
            </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="120">
            <template v-slot="scope">
                {{ scope.row.updateTime?.substring(0, 19)?.replace("T", " ") || '' }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template v-slot="scope">
                <el-button type="primary" size="small">编辑</el-button>
                <el-button type="danger" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize" :page-sizes="[3, 5, 8]"
        :background="true" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />

    <el-dialog v-model="icopen.iscode" title="新增" width="500">
        <el-form :model="form">
            <el-form-item label="编码">
                <el-input v-model="form.workCode" />
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="form.workname" />
            </el-form-item>
            <el-form-item label="工序">
                <el-select v-model="form.processOperationId">
                    <el-option v-for="item in getprocess" :label="item.processOperationName"
                        :value="item.processOperationId" />
                </el-select>
            </el-form-item>
            <el-form-item label="产线">
                <el-select v-model="form.lineId">
                    <el-option v-for="item in getlines" :label="item.lineName" :value="item.lineId" />
                </el-select>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="form.description" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="icopen.iscode = false">取消</el-button>
                <el-button type="primary" @click="addWorkStations">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import read from '@/dwrapper/axioswrapper'

const icopen = reactive({
    iscode: false
})

const page = reactive({
    pageIndex: 1,
    pageSize: 3,
    totalCount: 0,
    totalPage: 0
})

const form = reactive({
    workCode: "",
    workname: "",
    processOperationId: "",
    lineId: "",
    description: "",
})

const tableData = ref([])
const getWorkstations = () => {
    read.get('/api/WorkOrders/GetWorkstation', {
        params: {
            pageIndex: page.pageIndex,
            pageSize: page.pageSize
        }
    }).then(res => {
        tableData.value = res.data.data.list
        page.totalCount = res.data.data.totalCount
        page.totalPage = res.data.data.totalPage
    })
}

watch(page, () => {
    getWorkstations()
})
const getlines = ref<any>([])
const lines = () => {
    read.get('/api/WorkOrders/Getlines').then(res => {
        getlines.value = res.data.data
    })
}

const getprocess = ref<any>([])
const process = () => {
    read.get('/api/WorkOrders/GetProcess').then(res => {
        getprocess.value = res.data.data
    })
}

const addWorkStations = () => {
    read.post('/api/WorkOrders/AddWorkstation', form).then(res => {
        if (res.data.code == 3300) {
            ElMessage.success(res.data.message)
            getWorkstations()
            icopen.iscode = false
        } else {
            ElMessage.error(res.data.message)
        }
    })
}

onMounted(() => {
    getWorkstations();
    lines()
    process()
})

</script>

<style scoped>
/* 最外层容器：纵向排列，模块间有间距 */
.page-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* 模块之间的垂直间距 */
    padding: 16px;
    /* 页面内边距 */
}

/* 按钮组靠右 */
.button-group {
    display: flex;
    margin-left: auto;
    /* 关键：将按钮组推到右侧 */
    gap: 10px;
}
</style>